<template>
  <div>
    <!-- 一级分类 -->
    <div id="productTypeList" class="product-categories">
      <button v-for="(category, index) in categories" :key="index"
              class="category-btn" :class="{ active: activeCategory === index }"
              @click="setActiveCategory(index)">
        {{ category.name }}
      </button>
    </div>

    <!-- 二级分类 -->
    <div id="subCategories" class="sub-categories">
      <button class="sub-category-btn" :class="{ active: activeSubCategory === 'all' }"
              @click="setActiveSubCategory('all')">
        全部商品
      </button>
      
      <div v-for="(category, index) in categories" :key="index"
           class="sub-category-group" :class="{ active: activeCategory === index }">
        <button v-for="sub in category.subCategories" :key="sub.id"
                class="sub-category-btn" :class="{ active: activeSubCategory === sub.id }"
                @click="setActiveSubCategory(sub.id)">
          {{ sub.name }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 响应式分类数据
const categories = reactive([
  { name: '全部', subCategories: [] },
  { 
    name: '手机数码', 
    subCategories: [
      { id: 'phone', name: '手机' },
      { id: 'computer', name: '电脑' },
      { id: 'pad', name: '平板' },
      { id: 'camera', name: '相机' },
      { id: 'accessory', name: '配件' }
    ]
  },
  { 
    name: '家用电器', 
    subCategories: [
      { id: 'fridge', name: '冰箱' },
      { id: 'washer', name: '洗衣机' },
      { id: 'airConditioner', name: '空调' },
      { id: 'tv', name: '电视' },
      { id: 'kitchen', name: '厨房电器' }
    ]
  },
  { name: '服装鞋帽', subCategories: [{id:1,name:'服装'}, {id:2,name:'鞋帽'}] },
  { name: '美妆个护', subCategories: [{id:1,name:'美妆'}, {id:2,name:'个护'}] },
  { name: '家居生活', subCategories: [{id:1,name:'家居'},{id:1,name:'生活'}] }
])

// 响应式状态
const activeCategory = ref(0)
const activeSubCategory = ref('all')

// 响应式方法
const setActiveCategory = (index) => {
  activeCategory.value = index
  activeSubCategory.value = 'all' // 重置二级分类选中状态
}

const setActiveSubCategory = (subId) => {
  activeSubCategory.value = subId
}
</script>

<style scoped>
.product-categories {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 8px 16px;
  border: 1px solid #007BFF;
  border-radius: 20px;
  background-color: white;
  color: #007BFF;
  cursor: pointer;
  transition: all 0.3s;
}

.category-btn:hover,
.category-btn.active {
  background-color: #007BFF;
  color: white;
}

.sub-categories {
  display: flex;
  gap: 10px;
  margin: 15px 0;
  flex-wrap: wrap;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.sub-category-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.sub-category-btn:hover, .sub-category-btn.active {
  background-color: #007BFF;
  color: white;
  border-color: #007BFF;
}

.sub-category-group {
  display: none;
  gap: 10px;
}

.sub-category-group.active {
  display: flex;
}
</style>